
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="renderer" content="webkit"> 
    <title><%=siteName + ' - ' + siteAbout%></title>
    <link rel="icon" type="image/icon" href="<%=siteIcon%>">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/hljs.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/highlight.min.js"></script>
</head>
<body>
    <% include header.html %>
    <div id="doc-container">
        <div id="doc-bg"></div>
        <div id="doc-area">
            <h3>Js单元测试</h3>
            <p>JS单元测试对于JS组件是最基础的质量覆盖手段，逻辑越复杂，使用率越高，单元测试的编写价值就越大。</p>
            <p>这里我们介绍下基于Karma配合F2etest的执行机来实现JS单元测试的多浏览器持续集成：</p>
            <ol>
                <li>安装开发依赖：> npm i mocha karma karma-mocha karma-mocha-reporter karma-expect karma-coverage karma-chrome-launcher karma-webdriver-launcher --save-dev</li>
                <li>下载：<a href="/karma.conf.js">karma.conf.js</a></li>
                <li>
                    编辑:package.json
                    <pre><code>{
  ...
  "scripts": {
    "test": "./node_modules/.bin/karma start",
    "f2etest": "./node_modules/.bin/karma start --single-run --browsers f2etest-chrome,f2etest-firefox,f2etest-ie8,f2etest-ie9,f2etest-ie10,f2etest-ie11"
  }
  ...
}</code></pre>
                </li>
                <li>
                    新建测试用例：test/test.spec.js
                    <pre><code>describe('测试用例', function () {
    it('1等于1', function () {
        expect(1).to.equal(1);
        console.log('logtest');
    });
});</code></pre>
                </li>
                <li>开发运行：> npm run test (连接本地Chrome浏览器，监听文件变更并自动触发单元测试，并显示覆盖率情况)</li>
                <li>持续集成运行：> npm run f2etest (在远端多个浏览器中同时执行单元测试，并获取覆盖率数据)</li>
            </ol>
        </div>
    </div>
    <script type="text/javascript">
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });    
    </script>
    <% include footer.html %>
</body>
</html>
